<template>
    <div class="container-fluid">
      <div>
        <!-- <el-carousel style="width: 100%;" indicator-position="outside">
          <el-carousel-item v-for="item in 4" :key="item">
            <h3 text="2xl" justify="center">{{ item }}</h3>
          </el-carousel-item>
        </el-carousel> -->
      </div>
      <div class="row">
        <div class="col-3">
          <el-timeline>
            <el-timeline-item v-for="article in articleList" :key="article.id" center :timestamp="article.date" placement="top">
              <el-card @click="showArticle(article.id)" shadow="hover">
                <h6>{{ article.title }}</h6>
              </el-card>
            </el-timeline-item>
          </el-timeline>
      </div>
      <div class="col-6">
         <el-col>
          <el-card shadow="hover"> Hover </el-card>
        </el-col>
      </div>
      <div class="col-3"></div>
      </div>
        <!-- <div id="frozen-btn">
            <button class="green">Hover me</button>
            <button class="purple">Hover me</button>
        </div> -->
    </div>    
    <!-- <el-backtop :bottom="100">
    <div
      style="
        height: 100%;
        width: 100%;
        background-color: var(--el-bg-color-overlay);
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      "
    >
      UP
    </div>
  </el-backtop> -->
</template>

<script>
export default {
    
}
</script>

<style scoped>

div.row {
  margin-top: 5vh;
  --el-font-size-small: 20px;
}
#frozen-btn {
  /* display: flex;
  align-items: center;
  justify-content: center; */
  height: 100vh;
}

button {
  border: 0;
  margin: 20px;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: bold;
  padding: 15px 50px;
  border-radius: 50px;
  color: white;
  outline: none;
  position: relative;
}

button:before{
  content: '';
  display: block;
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 50%);
  background-size: 210% 100%;
  background-position: right bottom;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  bottom:0;
  right:0;
  left: 0;
  border-radius: 50px;
  transition: all 1s;
  -webkit-transition: all 1s;
}

.green {
   background-image: linear-gradient(to right, #25aae1, #40e495);
   box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}

.purple {
   background-image: linear-gradient(to right, #6253e1, #852D91);
   box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}
  
.purple:hover:before {
  background-position: left bottom;
}

.green:hover:before {
  background-position: left bottom;
}
.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>